from flask import Flask,render_template
from bokeh.resources import INLINE
from bokeh.embed import components
from picture import mpg,vbar_demo,pyecharts_map,geo_map
import json

app =Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')

@app.route('/vbar')
def vbar():
    p = mpg()
    titles = ('#','Header','Header','Header','Header')
    contents = [['x',1,2,3,4],['y',1.7, 2.2, 4.6, 3.9]]

    js_resources = INLINE.render_js()
    css_resources = INLINE.render_css()
    script, div = components(p)

    html = render_template(
        'vbar.html',
        plot_script=script,
        plot_div=div,
        js_resources=js_resources,
        css_resources=css_resources,
        the_titles=titles,
        the_contents=contents
    )
    return html

@app.route('/mpg')
def mpg_view():
    '''
    调用绘图函数
    '''
    p = mpg()
    p1 = vbar_demo()

    js_resources = INLINE.render_js()
    css_resources = INLINE.render_css()
    script, div = components([p,p1])

    html = render_template(
        'mpg.html',
        plot_script=script,
        plot_div=div,
        js_resources=js_resources,
        css_resources=css_resources
    )
    return html

@app.route('/map')
def charts_map():
    with open('高校数据.json', 'r', encoding='utf-8') as f:
        data = json.load(f)
    data_mul = [[i['province_name'], len(j['universities'])] for i in data['schools'] for j in i['cities']]

    p = pyecharts_map(data_mul)
    '''
    bokeh 和 pyecharts虽然都是底层为js的数据可视化工具，但生产的可视化图形数据类型有差异
    '''
    js_resources = INLINE.render_js()
    css_resources = INLINE.render_css()
    script, div = components(p)

    html = render_template(
        'geo_map.html',
        plot_script=script,
        plot_div=div,
        js_resources=js_resources,
        css_resources=css_resources
    )
    return html

if __name__ == '__main__':
    app.run()